<script  setup>
import { ref } from 'vue'
import {
    Location,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
</script>
  
<template>
    <div class="logo"><img
            src="https://tse1-mm.cn.bing.net/th/id/OIP-C.dazQhMMjKvbzdcd7iCeF-wHaHa?w=202&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            alt="">
        <h4>漫展预约管理系统</h4>
    </div>
    
    <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff" router>
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>漫展首页管理</span>
            </template>
            <el-sub-menu index="1-1">
                <template #title><span>轮播图管理</span></template>
                <el-menu-item index="1-1-1" route="/manage/loopmanage">轮播图添加</el-menu-item>
                <el-menu-item index="1-1-2" route="/manage/loopdel">轮播图删除</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="1-2">
                <template #title><span>轮播图管理</span></template>
                <el-menu-item index="1-2-1" route="/manage/showmanage">漫展展示</el-menu-item>
                <el-menu-item index="1-2-2" route="/manage/showadd">详情页</el-menu-item>
            </el-sub-menu>

        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>漫展活动管理</span>
            </template>
            <el-sub-menu index="2-1">
                <template #title><span>活动管理</span></template>
                <el-menu-item index="2-1-1" route="/manage/actsadd">活动添加</el-menu-item>
                <el-menu-item index="2-1-2" route="/manage/actsdel">轮播图删除</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2-2">
                <template #title><span>轮播图管理</span></template>
                <el-menu-item index="2-2-1" route="/manage/coseradd">漫展展示</el-menu-item>
                <el-menu-item index="2-2-2" route="/manage/showadd">详情页</el-menu-item>
            </el-sub-menu>

        </el-sub-menu>
    </el-menu>
</template>
  
  
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 600px;
}

.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

img {
    width: 60px;
    height: 60px;
}</style>
  